import { ref } from "vue";
import Sortable from "sortablejs";
import { articleSort } from '@/api/article'
import { ElMessage } from "element-plus"
import i18n from '@/i18n'
// 排序相关
export const tableRef = ref(null);

/**
 * 初始化排序
 */
export const initSortable = (tableData, cb) => {
    // 设置拖拽效果 https://coding.imooc.com/learn/questiondetail/RQyZ06gKmDW6e459.html
    const el = tableRef.value.$el.querySelectorAll(
        ".el-table__body-wrapper table > tbody"
    )[0];
    // 1. 要拖拽的元素
    // 2. 配置对象
    Sortable.create(el, {
        // 拖拽时，让Sortable给我们生成的类名
        ghostClass: "sortable-ghost",
        // 拖拽结束的回调方法
        // 拖拽结束的回调方法
        async onEnd(event) {
            const { newIndex, oldIndex } = event
            console.log("newIndex, oldIndex表示的是位置，而不是排名：",newIndex,oldIndex);
            // 修改数据
            await articleSort({
                initRanking: tableData.value[oldIndex].ranking,
                finalRanking: tableData.value[newIndex].ranking
            })
            ElMessage.success({
                message: i18n.global.t('msg.article.sortSuccess'),
                type: 'success'
            })
            // 原因：因为Element Plus存在的问题，直接重新获取数据无法刷新el-table!!!所以在重新获取数据之前，要清空列表数据。
            tableData.value = []
            // 重新获取数据
            cb && cb()
        }
    });
};

